<template>
	<view class="page_bg pos_rel">
		<image src="https://www.worldintek.com:39011/yaolexue-service/icon_dati_bg.png" class="imgbg"></image>
		<view class="h-119"></view>
		<view class="pos_rel res-box">
			<image class="res-img" src="https://www.worldintek.com:39011/yaolexue-service/answer-starimg.png"></image>
			<block v-if="isAnswerSpecial">
				<view class="cr-222 font_s40 text_center padd-top116">
					本次作答分数
				</view>
				<view class="flex justify-center mar-top36 line-height100">
					<view class="cr-FA312A font_s36 pos_rel">
						<text class="font_s70 font_w500 mar-right8">{{subjectResInfo.score || 0}}</text>
						分
						<view v-if="!subjectResInfo.isPassed" class="tags-tt error-tags flex align-center justify-center">
							不过关
						</view>
						<view v-else class="tags-tt success-tags flex align-center justify-center">
							过关
						</view>
					</view>
				</view>
				<view class="flex justify-center times-box line-height100">
					<view class="flex justify-center flex-direction align-center flex1">
						<view class="cr-222 font_s28 line-height100">
							{{subjectResInfo.timeCount || ''}}
						</view>
						<view class="cr-999 font_s24 mar-top28 line-height100">
							用时
						</view>
					</view>
					<view class="flex justify-center flex-direction align-center flex1">
						<view class="cr-222 font_s28 line-height100">
							{{subjectResInfo.accuracy || 0}}%
						</view>
						<view class="cr-999 font_s24 mar-top28 line-height100">
							正确率
						</view>
					</view>
				</view>
				<view class="btn-box flex justify-between mar-top46">
					<view @click="clickJx" class="jiexi">
						查看解析 
					</view>
					<view v-if="!subjectResInfo.isPassed" @click="clickJumpRest(1)" class="reset">
						再来一次
					</view>
					<view v-else @click="isPopShow = true" class="reset">
						查看证书
					</view>
				</view>
			</block>
			<block v-else>
				<view class="cr-222 font_s40 text_center padd-top116">
					本次答对题目数
				</view>
				<view class="flex justify-center mar-top36 line-height100">
					<view class="cr-222">
						<text class="font_s70 font_w500">{{dayRes.rightCnt}}</text>
					</view>
				</view>
				<view class="flex flex-direction justify-center times-box line-height100">
					<view class="flex">
						<view class="cr-222 font_s24 flex align-center flex1">
							<view>
								正确率： 
							</view>
							<view class="mar-left0">
								{{dayRes.rightRate}}%
							</view>
						</view>
						<view class="cr-222 font_s24 flex justify-end align-center flex1">
							<view>
								用时：
							</view>
							<view class="mar-left0">
								{{dayRes.timeCount}}
							</view>
						</view>
					</view>					
					<view class="cr-222 font_s24 flex align-center mar-top28">
						<view>
							错题数：
						</view>
						<view class="mar-left0">
							{{dayRes.wrongCnt}}
						</view>
					</view>
				</view>
				<view class="btn-box flex justify-between mar-top46">
					<view @click="clickJumpBack" class="jiexi">
						返回 
					</view>
					<view @click="clickJumpRest(2)" class="reset">
						再来一组
					</view>
				</view>
			</block>
		</view>
		<u-popup :show="isPopShow" mode="center"  @close="isPopShow = false" bgColor="transparent">
			<view class="flex flex-direction align-center">
				<image :src="`https://www.worldintek.com:39011/yaolexue-service/${subjectResInfo.examCertificate.compressLink}`" class="cer-img"></image>
				<image @click="isPopShow = false" src="https://www.worldintek.com:39011/yaolexue-service/pop-close.png" class="pop-close"></image>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isAnswerSpecial:false,
				isPopShow:false,
				optionsType:1,  ////1=每日答题;2=专项答题
				dayRes:{
					rightCnt:0,
					rightRate:0,
					wrongCnt:0
				},
				memberSubjectId:'',
				subjectId:'',
				subjectResInfo:{}
			}; 
		},
		onLoad(options) {
			this.optionsType = options.type
			if(this.optionsType == 1){
				this.dayRes = getApp().globalData?.dayAnswerRes ?? {
					rightCnt:0,
					rightRate:0,
					wrongCnt:0,
					startTime:new Date().getTime(),
					endTime:new Date().getTime()
				}
				console.log(this.dayRes.startTime,'===>startTime')
				var start = new Date(this.dayRes.startTime);
				var end = new Date(this.dayRes.endTime);
				console.log(start,'====>start')
				console.log(end.getTime() - start.getTime())
				this.dayRes.timeCount = this.$formatMillisecondsToTime(end.getTime() - start.getTime()) 
			}else{
				this.memberSubjectId = options.memberSubjectId
				this.subjectId = options.subjectId
				this.isAnswerSpecial = true
				if(options.isAnalysisShow == 0){
					this.getZxResInfo()
				}else{
					this.zxData(getApp().globalData.zxAnswerRes)
				}
			}
		},
		methods:{
			getZxResInfo(){
				this.$http.post(`/yaolexue-service-portal/exam/member-subject/${this.memberSubjectId}/finish`,{
					
				}).then(res => {
					if(res.code === 200){
						getApp().globalData.zxAnswerRes = res.data
						this.zxData(res.data)
					}else{
						uni.showToast({
							title:'获取失败',
							icon:'none'
						})
					}
				})
			},
			zxData(data){
				this.subjectResInfo = data
				this.subjectResInfo.accuracy = (data.rightCount / data.totalCnt) * 100
				var start = new Date(data.startTime);
				var end = new Date(data.endTime);
				this.subjectResInfo.timeCount = this.$formatMillisecondsToTime(end.getTime() - start.getTime()) 
				this.isPopShow = data.isPassed
			},
			clickJumpRest(){
				if(this.optionsType == 2){
					uni.redirectTo({
						url:`/subPages/specialAnswer/specialAnswer?type=2&subjectId=${this.subjectId}&isAnalysisShow=${0}`
					})
				}else{
					uni.redirectTo({
						url:`/subPages/answer/answer?type=${this.optionsType}`
					})
				}
			},
			clickJx(){
				uni.redirectTo({
					url:`/subPages/specialAnswer/specialAnswer?type=2&subjectId=${this.subjectId}&isAnalysisShow=${1}&memberSubjectId=${this.memberSubjectId}`
				})
			},
			clickJumpBack(){
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.imgbg{
		width: 100%;
		height: 1081rpx;
		position: absolute;
		top: 0;
	}
	.res-box{
		width: 611rpx;
		height: 583rpx;
		background: linear-gradient(0deg, #F3F3FF, #ECEFFE);
		border-radius: 36rpx;
		position: relative;
		z-index: 3;
		margin: auto;
		&::before{
			content: '';
			width: 558rpx;
			height: 583rpx;
			background: linear-gradient(0deg, #F3F3FF, #ECEFFE);
			opacity: 0.6;
			border-radius: 36rpx;
			display: block;
			position: absolute;
			z-index: -1;
			top: 12rpx;
			left: 50%;
			transform: translateX(-50%);
		}
		&::after{
			content: '';
			width: 508rpx;
			height: 583rpx;
			background: linear-gradient(0deg, #F3F3FF, #ECEFFE);
			opacity: 0.25;
			border-radius: 36rpx;
			display: block;
			position: absolute;
			z-index: -1;
			top: 23rpx;
			left: 50%;
			transform: translateX(-50%);
		}
		.res-img{
			width: 212rpx;
			height: 163rpx;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			top: -67rpx;
		}
	}
	.tags-tt{
		right: -107rpx;
		position: absolute;
		top: 0;
		&.error-tags{
			width: 104rpx;
			height: 43rpx;
			background: rgba(252, 0, 27, 0.33);
			border-radius: 10rpx;
			font-size: 26rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FC001B;
		}
		.success-tags{
			width: 104rpx;
			height: 43rpx;
			background: #E0B756;
			border-radius: 10rpx;
			font-size: 26rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #6C500F;
		}
	}
	
	.times-box{
		width: 509rpx;
		height: 148rpx;
		background: #D0D7FB;
		border-radius: 24rpx;
		margin: 40rpx auto 0 auto;
		padding: 0 36rpx 0 32rpx;
		&>view{
			width: 100%;
		}
	}
	.btn-box{
		padding: 0 52rpx;
		&>view{
			width: 224rpx;
			height: 78rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.jiexi{
			border: 1rpx solid #999999;
			border-radius: 10rpx;
			color: #222222;
			font-size: 28rpx;
		}
		.reset{
			background: #FA312A;
			border-radius: 10rpx;
			font-size: 28rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FEFEFE;
		}
	}
	.cer-img{
		width: 503rpx;
		height: 359rpx;
	}
	.pop-close{
		width: 73rpx; 
		height: 73rpx;
		margin-top: 53rpx;
	}
</style>
